<template>
    <div class="main">
        <div class="top">
            <div class="left">
                <span>需求描述： </span>
                <el-input v-model="input" placeholder="请输入内容"></el-input>
                <span style="margin-left: 60px;">应用场景： </span>
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-button @click="search" type="primary">查询</el-button>
                <el-button @click="nosearch" style="margin-left: 10px; width: 80px;">重置</el-button>
            </div>
        </div>
        <el-button type="primary" class="button" @click="show">新增文件</el-button>
        <el-table class="table" :data="tableData" tooltip-effect="dark" style="width: 100%" fit
            :row-style="{ height: '50px' }"
            :header-cell-style="{ fontSize: '18px', backgroundColor: '#D4E8FD', color: '#333' }">
            <el-table-column label="序号" type="index" width="120"> </el-table-column>
            <el-table-column prop="name" label="数据类型" width="220" show-overflow-tooltip></el-table-column>
            <el-table-column prop="type" label="code" width="320"></el-table-column>
            <el-table-column prop="host" label="值" width="480"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <a href="javascript:" style="margin-right: 20px;">详情</a>
                    <a href="javascript:" style="margin-right: 20px;">编辑</a>
                    <a href="javascript:" style="margin-right: 20px;color: red;" @click="handleDelete">删除</a>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog title="体系指标管理" v-model="isShow" width="480px" :append-to-body="true" class="data-dialog" :modal="true">
        <el-form :model="form" label-width="120px" :rules="rule1">
            <el-form-item label="数据类型：" prop="name">
                <el-input v-model="form.name" width="220px" style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="code：" prop="type">
                <el-input v-model="form.type" style="width: 220px;"></el-input>
            </el-form-item>
            <el-form-item label="值" prop="host">
                <el-input v-model="form.host" style="width: 220px;"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cale"> 取消 </el-button>
                <el-button type="primary" @click="add"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            input: "",
            isShow: false,
            form: { name: "", type: "", host: "" },
            options: [{
                label: "全部",
                value: "全部",
            }],
            value: '全部',
            rule1: {
                name: [{ required: true, message: '数据类型不能为空', trigger: 'blur' }],
                type: [{ required: true, message: 'coede不能为空', trigger: 'blur' }],
                host: [{ required: true, message: '值不能为空', trigger: 'blur' }],
            },
            tableData: [
                {
                    name: "活动",
                    type: "HD1",
                    host: "活动1",
                },
                {
                    name: "活动",
                    type: "HD2",
                    host: "活动2",
                },
                {
                    name: "能力",
                    type: "NL1",
                    host: "能力1",
                },
                {
                    name: "能力",
                    type: "NL2",
                    host: "能力2",
                },
                {
                    name: "装备",
                    type: "ZB1",
                    host: "装备1",
                },
                {
                    name: "装备",
                    type: "ZB2",
                    host: "装备2",
                },
                {
                    name: "功能",
                    type: "GN1",
                    host: "功能1",
                },
                {
                    name: "功能",
                    type: "GN2",
                    host: "功能2",
                },
                {
                    name: "接口",
                    type: "JK1",
                    host: "接口1",
                },
                {
                    name: "接口",
                    type: "JK2",
                    host: "接口2",
                },
                {
                    name: "任务指标",
                    type: "RWZB1",
                    host: "任务指标1",
                },
                {
                    name: "任务指标",
                    type: "RWZB2",
                    host: "任务指标2",
                },
                {
                    name: "能力指标",
                    type: "NLZB1",
                    host: "能力指标1",
                },
                {
                    name: "能力指标",
                    type: "NLZB2",
                    host: "能力指标2",
                },
                {
                    name: "装备指标",
                    type: "ZBZB1",
                    host: "装备指标1",
                },
                {
                    name: "装备指标",
                    type: "ZBZB2",
                    host: "装备指标2",
                },
                {
                    name: "行动指标",
                    type: "XDZB1",
                    host: "行动指标1",
                },
                {
                    name: "行动指标",
                    type: "XDZB1",
                    host: "行动指标1",
                }
            ],
            copy: [],
        }
    },
    methods: {
        show() {
            this.isShow = true;
        },
        cale() {
            this.isShow = false;
        },
        add() {
            this.isShow = false;
            const newRow = {
                name: this.form.name,
                type: this.form.type,
                host: this.form.host,
            };
            this.tableData.unshift(newRow)
        },
        handleDelete(index, row) {
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确定",
                type: "warning"
            }).then(() => {
                row.splice(index, 1);
            }).catch(() => {
            })
        },
        search() {
            this.copy = this.tableData;
            this.tableData = this.tableData.filter(item => item.name.includes(this.input) || item.type.includes(this.input) || item.host.includes(this.input) || item.date.includes(this.input));
        },
        nosearch() {
            this.tableData = this.copy;
            this.input = "";
        }
    }
}
</script>

<style lang="less" scoped>
@import url("../font/file.less");
</style>